<template>
  <div>
    <!-- 头部 -->
    <hraderTop title="试卷管理">
      <el-button type="primary" @click="subjectsAdd">创建考试</el-button>
    </hraderTop>

    <!-- 搜索内容 -->
    <el-form :model="query" style="display: flex;">
    <el-form-item label="关键字">
      <el-input v-model="query.key" placeholder="考试名称"/>
    </el-form-item>

    <el-form-item label="创建人">
      <el-input v-model="query.admin" placeholder="创建人"/>
    </el-form-item>

    <el-checkbox v-model="checked2">只看我创建的</el-checkbox>

    <el-button type="primary" style="margin-left: 20px;" @click="Submit">查询</el-button>
  </el-form>

  <!-- 列表 -->
  <tableAdmin :tableHead="tableHead"
      :tableData="tableData"
      @testDetail="testDetail"
      @del="del"
      @edit="edit">
  </tableAdmin>

  <!-- 分页 -->
  <pages
      :total="total"
      :page="query.page"
      :pageSize="query.psize"
      @changePageSize="changePageSize"
      @changePage="changePage"
    />

       <!-- 详情的弹窗口 -->
       <textDialog v-show="dialogStore.show" :id="subPar.id"/>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive,toRefs } from 'vue';
import hraderTop from '../../components/header/headerTop.vue'
import tableAdmin from '../../components/table/tableAdmin.vue'
import pages from '../../components/pages/pages.vue'
import {subjectsList,subjectsDel} from '../../api/subjects'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useDialogStore } from '../../store/dialog';
import textDialog from "../../components/textAdmin/dialog.vue"
import { useRouter } from 'vue-router';

const router = useRouter();
const form = reactive({
  name: '',
})
const checked2 = ref(false)
const dialogStore = useDialogStore()
const { type, show, title } = toRefs(dialogStore)
const subPar = reactive({
  id:0
})


//列表数据
const tableData = ref([]);
const tableHead: any[] = [
  {
    label: '试卷名称',
    prop: 'title',
  },
  {
    label: '题量',
    prop: 'counts',
  },
  {
    label: '单选',
    prop: 'singles',
  },
  {
    label: '多选',
    prop: 'multiples',
  },
  {
    label: '判断',
    prop: 'qas',
  },
  {
    label: '填空',
    prop: 'judges',
  },
  {
    label: '问答',
    prop: 'teacherid',
  },
  {
    label: '总分',
    prop: 'scores',
  },
  {
    label: '创建人',
    prop: 'admin',
  },
  {
    label: '更新时间',
    prop: 'addtime',
  },
  {
    label: '操作',
    type: 'button',
    buttons: [
      {
        text: '编辑',
        event: 'edit',
        type: 'primary',
        show: true,
      },
      {
        text: '删除',
        event: 'del',
        type: 'primary',
        show: true,
      },
    ],
  },
];

let total = ref(0); // 总条数
const query = reactive({
  page: 1,
  psize: 10,
  key: '',
  admin:'',
  ismy:''
});
const getList = async () => {
  const res = await subjectsList(query)
  console.log(res);
  tableData.value=res.data.list
  total.value=res.data.counts
};
getList();

// 切换分页数据
const changePageSize = (val: number) => {
  console.log('val-pageSize', val);
  query.psize = val; //页码
  // 请求列表数据...
  getList();
};

const changePage = (val: number) => {
  console.log('val-page', val);
  query.page = val; //每页显示多少条
  // 请求列表数据...
  getList();
};

// 查询
const Submit = ()=>{
  getList();
}

// 删除
const del = (ids:any)=>{
 let {id} = ids
  console.log(id);
  ElMessageBox.confirm('确定要删除所选项吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res:any = await subjectsDel({ id: id });
      console.log(res);
      if (res.errCode === 10000) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        getList();
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
}

// 详情
const testDetail = (row:any)=>{
  // console.log(row);
  let {id,title} = row
  console.log(id);
  console.log(title);
  dialogStore.$patch(state=>{
    state.show=true
    state.type='test'
    subPar.id=id
    state.title=title
  })
}

// 编辑
const edit = (row:any)=>{
  // console.log(row);
  let {id} = row
  console.log(id);
  router.push({name:'subjectsAdd',query:{id}});
}

// 创建考试
const subjectsAdd = ()=>{
  router.push('/subjectsAdd');
}
</script>

<style lang="less" scoped>
  .el-input{
    width: 130px;
    margin-right: 20px;
  }
</style>